Uso React y Axios para solicitudes de API.

Tengo un problema con una solicitud de API; Yo obtengo:

 Cannot GET /posts/byId/1

Cuando hago un GET en http://localhost:3002/posts/byId/1 , mientras todas mis otras solicitudes funcionan.

¿Alguien tiene una solución?

Mis rutas:

 const express = require('express'); const router = express.Router(); const { Posts } = require('../models'); router.get('/', async (req, res) => { const listOfPosts = await Posts.findAll(); res.json(listOfPosts); }); router.get('/byId/:id', async (req, res) => { const id = req.params.id; const post = await Posts.findByPk(id); res.json(post); }); router.post('/', async (req, res) => { const post = req.body; await Posts.create(post); res.json(post); }); module.exports = router;

Mi aplicación.js:

 import './App.css'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import Home from './pages/Home'; import CreatePost from './pages/CreatePost'; import Post from './pages/Post'; function App() { return ( <div className="App"> <Router> <div className="navbar"> <Link to="createPost"> Create A Post </Link> <Link to="/"> Home Page </Link> </div> <Routes> <Route path="/" element={<Home />} /> <Route path="/createPost" element={<CreatePost />} /> <Route path="/post/:id" element={<Post />} /> </Routes> </Router> </div> ); } export default App;

Mi Post.js:

 import React, { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; function Post() { let { id } = useParams(); useEffect(() => { axios.get(`http://localhost:3002/posts/byId/${id}`).then((response) => {}); }); return <div>{id}</div>; } export default Post;